<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>
        京东项目实战
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="fonts/iconfont.js"></script>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <style>
            .icon {
              width: 1em;
              height: 1em;
              vertical-align: -0.15em;
              fill: currentColor;
              overflow: hidden;
            }
            </style>
</head>
<body>
    <header>
        <div class="w">
            <a href="#">
                <img src="images/e.jpg" height="80px" width="1190px" alt="">
            </a>
        </div>
        
        

    </header>

    <!-- 快速导航栏 -->
    <div class="shortcut">
            <div class="w">
                <ul class="fl city" >
                    <li>
                        <i class="f10"></i><a href="">北京</a>
                    </li>
                </ul>
                <ul class="fr">
                    <li>
                        <a href=>你好，请登录</a>
                        <a href="" class="f10">免费注册</a>
                    </li>
                    <li class="space"></li>
                    <li>
                        <a href="">我的订单</a>
                    </li>
                    <li class="space"></li>
                    <li>
                        <a href="">我的京东</a>
                        <i></i>
                    </li>
                    <li class="space"></li>
                    <li>
                        <a href="">京东会员</a>
                    </li>
                    <li class="space"></li>
                    <li>
                        <a href="">企业采购</a>
                    </li>
                    <li class="space"></li>
                    <li>
                        <a href="">客户服务</a>
                        <i></i>
                    </li>
                    <li class="space"></li>
                    <li>
                        <a href="">网站导航</a>
                        <i></i>
                    </li>
                    <li class="space"></li>
                    <li>
                        <a href="" class="mobile">手机京东
                            <img src="images/ewm.png" height="60" width="60" alt="">
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="w middle">
            <div class="logo">
                <!-- 提高权重，便于搜索 -->
                <h1> 
                    <a href=""></a>
                </h1>
            </div>
            <!-- 搜索 -->
            <div class="form">
                <input type="text" placeholder="扫描仪">
                <button> <i></i></button>
            </div>
            <!-- 购物车 -->
            <div class="shopCar">
               <i></i> <a class="f10" href="">我的购物车</a><span>0</span>
            </div>
            <!-- 关键词 -->
            <div class="hotwords">
                <a href="" class="f10">大黄蜂来了</a>
                <a href="">生鲜礼盒</a>
                <a href="">每100-40</a>
                <a href="">建材特惠</a>
                <a href="">12期免息</a>
                <a href="">满千减百</a>
                <a href="">配饰清仓</a>
                <a href="">海囤全球</a>
                
            </div>

            <div class="navitems">
                <ul>
                    <li><a href="">秒杀</a></li>
                    <li><a href="">优惠券</a></li>
                    <li><a href="">PLUS会员</a></li>
                    <li><a href="">闪购</a></li>
                    <li class="space"></li>
                    <li><a href="">拍卖</a></li>
                    <li><a href="">京东时尚</a></li>
                    <li><a href="">京东超市</a></li>
                    <li><a href="">京东生鲜</a></li>
                    <li class="space"></li>
                    <li><a href="">海囤全球</a></li>
                    <li><a href="">京东金融</a></li>
                </ul>
            </div>

            <!-- 超级日部分 -->
            <div class="super">
                <a href=""><img src="images/super.png" height="40" width="190" alt=""></a>
            </div>
        </div>

        <!-- 中间类部分 -->
        <div class="w grid">
            <div class="grid-col1 fl">
                <ul>
                    <li>
                        <a href="">家用电器</a>
                    </li>
                    <li><a href="">手机</a>/<a href="">运营商</a>/<a href="">数码</a></li>
                    <li><a href="">电脑</a>/<a href="">办公</a></li>
                    <li><a href="">家居</a>/<a href="">家具</a>/<a href="">家装</a>/<a href="">厨具</a></li>
                    <li><a href="">男装</a>/<a href="">女装</a>/<a href="">童装</a>/<a href="">内衣</a></li>
                    <li><a href="">美妆</a>/<a href="">个护清洁</a>/<a href="">宠物</a></li>
                    <li><a href="">女鞋</a>/<a href="">箱包</a>/<a href="">钟表</a>/<a href="">珠宝</a></li>
                    <li><a href="">男鞋</a>/<a href="">运动</a>/<a href="">户外</a></li>
                    <li><a href="">房产</a>/<a href="">汽车</a>/<a href="">汽车用品</a></li>
                    <li><a href="">母婴</a>/<a href="">玩具乐器</a></li>
                    <li><a href="">食品</a>/<a href="">酒类</a>/<a href="">生鲜</a>/<a href="">特产</a></li>
                    <li><a href="">艺术</a>/<a href="">礼品鲜花</a>/<a href="">农贸绿植</a></li>
                    <li><a href="">医药保健</a>/<a href="">计生情趣</a></li>
                    <li><a href="">图书</a>/<a href="">文娱</a>/<a href="">电子书</a></li>
                    <li><a href="">机票</a>/<a href="">酒店</a>/<a href="">旅游</a>/<a href="">生活</a></li>
                    <li><a href="">理财</a>/<a href="">众筹</a>/<a href="">白条</a>/<a href="">保险</a></li>
                    <li><a href="">安装</a>/<a href="">维修</a>/<a href="">清洗保养</a></li>
                    <li><a href="">工业品</a></li>
                
                
                </ul>
            </div>
            <div class="grid-col2 fl">
                <div class="grid-col2-t">
                    <img src="images/a.jpg" alt="">
                    <a href="" class="arrow-l"><</a>
                    <a href="" class="arrow-r">></a>
                    <ul class="circle">
                        <li></li>
                        <li></li>
                        <li class="c3"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                
            </div>
            <div class="grid-col3 fl">
                    <div class="rec">
                            <img src="images/b.jpg" alt="">
                        </div>
                        <div class="rec-2">
                            <img src="images/c.jpg" alt="">
                        </div>
                        <div class="rec-3">
                            <img src="images/d.jpg" alt="">
                        </div>
            </div>
            <div class="grid-col4 fr">
                <!-- 登录模块 -->
                <div class="login">
                    <div class="logon-t">
                        <a href=""><img src="images/no_login.jpg" alt=""></a>
                    </div>
                    <div class="login-z">
                        <p class="p1">Hi~欢迎来到京东！</p>
                        <p>
                            <a href="">登录</a>
                            <a href="">注册</a>
                        </p>
                    </div>
                    <div class="login-b">
                        <a class="user_profit_lk " href="">新人福利</a>
                        <a class="user_profit_lk user_profit_lk_plus" href="">PLUS会员</a>
                    </div>
                </div>
                <!-- 新闻模块 -->
                
                <div class="news">
                    <div class="news-t">
                        <a href="" class="cuxiao">促销</a>
                        <a href="" class="gg">公告</a>
                        <a href="" class="more">更多</a>
                        <div></div>
                    </div>
                    <div class="news-b">
                        <ul>
                            <li class="news_item"><a href="">年货采购满300减200</a></li>
                            <li class="news_item"><a href="">工业品领券199减100</a></li>
                            <li class="news_item"><a href="">2019 囤好礼 过好年</a></li>
                            <li class="news_item"><a href="">笔记本限时秒杀</a></li>
                        </ul>
                    </div>
                </div>
                <div class="expand">
                    <ul>
                        <li><a href="">
                            <i class="service_ico"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-huafei"></use>
                                  </svg></i>
                                  <span class="service_txt">话费</span>
                        </a>
                        </li>
                        <li><a href="">
                                <i class="service_ico"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-jipiao"></use>
                                      </svg></i>
                                      <span class="service_txt">机票</span>
                            </a>
                        </li>
                            <li><a href="">
                                    <i class="service_ico"><svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-jiudian"></use>
                                          </svg></i>
                                          <span class="service_txt">酒店</span>
                                </a>
                        </li>
                        <li><a href="">
                                <i class="service_ico"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-youxi"></use>
                                      </svg></i>
                                      <span class="service_txt">游戏</span>
                            </a>
                        </li>
                        <li><a href="">
                                <i class="service_ico"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-qiyegou"></use>
                                      </svg></i>
                                      <span class="service_txt">企业购</span>
                            </a>
                        </li>
                        <li><a href="">
                                <i class="service_ico"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-jiayouka"></use>
                                      </svg></i>
                                      <span class="service_txt">加油卡</span>
                            </a>
                        </li>
                        <li><a href="">
                                <i class="service_ico"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-dianyingpiao"></use>
                                      </svg></i>
                                      <span class="service_txt">电影票</span>
                            </a>
                        </li>
                        <li><a href="">
                                <i class="service_ico"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-icon"></use>
                                      </svg></i>
                                      <span class="service_txt">火车票</span>
                            </a>
                        </li>
                        <li><a href="">
                                <i class="service_ico"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-zhongchou"></use>
                                      </svg></i>
                                      <span class="service_txt">众筹</span>
                            </a>
                        </li>
                        <li><a href="">
                                <i class="service_ico"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-licai"></use>
                                      </svg></i>
                                      <span class="service_txt">理财</span>
                            </a>
                        </li>
                        <li><a href="">
                                <i class="service_ico"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-lipinka"></use>
                                      </svg></i>
                                      <span class="service_txt">礼品卡</span>
                            </a>
                        </li>
                        <li><a href="">
                                <i class="service_ico"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-baitiao"></use>
                                      </svg></i>
                                      <span class="service_txt">白条</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


    <!-- 页面底部分 -->
    <footer>
        <div class="service">
            <div class="w">
                <ul>
                    <li>
                        <h5>多</h5>
                        <p>品类齐全，轻松购物</p>
                    </li>
                    <li>
                        <h5>多</h5>
                        <p>品类齐全，轻松购物</p>
                    </li>
                    <li>
                        <h5>多</h5>
                        <p>品类齐全，轻松购物</p>
                    </li>
                    <li>
                        <h5>多</h5>
                        <p>品类齐全，轻松购物</p>
                    </li>
                </ul>
            </div>
        </div>

        <div class="w help">
             <div class="fl">
                 <dl>
                     <dt>购物指南</dt>
                     <dd>购物流程</dd>
                     <dd>购物流程</dd>
                     <dd>购物流程</dd>
                     <dd>购物流程</dd>
                     <dd>购物流程</dd>
                     <dd>购物流程</dd>
                 </dl>
                 <dl>
                        <dt>购物指南</dt>
                        <dd>购物流程</dd>
                        <dd>购物流程</dd>
                        <dd>购物流程</dd>
                        <dd>购物流程</dd>
                        <dd>购物流程</dd>
                        <dd>购物流程</dd>
                    </dl>
                    <dl>
                            <dt>购物指南</dt>
                            <dd>购物流程</dd>
                            <dd>购物流程</dd>
                            <dd>购物流程</dd>
                            <dd>购物流程</dd>
                            <dd>购物流程</dd>
                            <dd>购物流程</dd>
                        </dl>
                        <dl>
                                <dt>购物指南</dt>
                                <dd>购物流程</dd>
                                <dd>购物流程</dd>
                                <dd>购物流程</dd>
                                <dd>购物流程</dd>
                                <dd>购物流程</dd>
                                <dd>购物流程</dd>
                            </dl>
                            <dl>
                                    <dt>购物指南</dt>
                                    <dd>购物流程</dd>
                                    <dd>购物流程</dd>
                                    <dd>购物流程</dd>
                                    <dd>购物流程</dd>
                                    <dd>购物流程</dd>
                                    <dd>购物流程</dd>
                                </dl>
             </div>
             <div class="fr coverage">
                 <h5>京东自营覆盖区县</h5>
                 <p>京东已向全国2661个区县提供自营配送服务，
                     支持货到付款、POS机刷卡和售后上门服务。
                </p>
                <a href="">查看详情</a>
             </div>   
        </div>
        <div class="w copyright">
            <p>
                <a href="">关于我们</a>
                <span>|</span>
                <a href="">联系我们</a>
                <span>|</span>
                <a href="">联系客服</a>
                <span>|</span>
                <a href="">合作招商</a>
                <span>|</span>
                <a href="">商家帮助</a>
                <span>|</span>
                <a href="">营销中心</a>
                <span>|</span>
                <a href="">手机京东</a>
                <span>|</span>
                <a href="">友情链接</a>
                <span>|</span>
                <a href="">销售联盟</a>
                <span>|</span>
                <a href="">京东社区</a>
                <span>|</span>
                <a href="">风险监测</a>
                <span>|</span>
                <a href="">隐私政策</a>
                <span>|</span>
                <a href="">京东公益</a>
                <span>|</span>
                <a href="">English Site</a>
                <span>|</span>
                <a href="">Media & IR</a>
            </p>
            <div>
                    <p>京公网安备 11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号
                        (京)-经营性-2014-0008<span>|</span>新出发京零 字第大120007号</p>
                    <p>互联网出版许可证编号新出网证(京)字150号|出版物经营许可证<span>|</span>网络文化经营许可
                        证京网文[2014]2148-348号<span>|</span>违法和不良信息举报电话：4006561155</p>
                    <p>Copyright © 2004 - 2019  京东JD.com 版权所有|消费者维权热线：4006067733
                        经营证照<span>|</span>(京)网械平台备字(2018)第00003号<span>|</span>营业执照</p>
            </div>
            <div class="copyright_inter">
                <p>
                    <a href="">
                        <i class="inter_ico globla"></i>Globla Site
                    </a>
                    <span>|</span>
                    <a href="">
                            <i class="inter_ico pocc"></i>Сайт России
                    </a>
                    <span>|</span>
                    <a href="">
                            <i class="inter_ico Indonesia"></i>Situs Indonesia
                    </a>
                    <span>|</span>
                    <a href="">
                            <i class="inter_ico Sitio"></i>Sitio de España
                    </a>
                    <span>|</span>
                    <a href="">
                            <i class="inter_ico nnn"></i>เว็บไซต์ประเทศไทย
                    </a>
                   
                </p>
            </div>
            <p class="foot_ico">
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </p>
        </div>
    </footer>
</body>
</html>